<!DOCTYPE html >
<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false"%>
<html>
<head>
    <script src="${pageContext.request.contextPath}/js/jquery-3.4.1.min.js"></script>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/css/index.css" />
    <link rel="stylesheet" href="${pageContext.request.contextPath}/css/bootstrap.min.css" />
    <script src="${pageContext.request.contextPath}/js/bootstrap.min.js"></script>
    <script src="${pageContext.request.contextPath}/js/nprogress.js"></script>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/css/nprogress.css" />
    <link rel="stylesheet" href="${pageContext.request.contextPath}/css/swiper.min.css" />
    <script src="${pageContext.request.contextPath}/js/swiper.min.js"></script>
    <script src="${pageContext.request.contextPath}/layer/layer.js"></script>
    <script src="${pageContext.request.contextPath}/js/template-web.js"></script>
    <style>
        a,a:hover{
            color: #ffffff;
            text-decoration: none;
        }
    </style>
    <script>
        $(function() {
            //banner
            NProgress.start();
            $.ajax({
                url:'${pageContext.request.contextPath}/front/movie/getBanner',
                async:true,
                dataType: "json",
                success:function (data) {
                    NProgress.done();
                    if(data!==null){
                        var htmlBanner = template('bannerTemp',{list:data.data});
                        $('#swiper-wrapper').html(htmlBanner);
                        //轮播
                        var swiper = new Swiper('.swiper-container', {
                            autoplay:true,
                            loop: true,
                            autoHeight: true,
                            slidesPerView: "auto",
                            pagination: {
                                el: '.swiper-pagination',
                                dynamicBullets: true,
                            },
                        });
                    }else{
                        $('#swiper').hide();
                    }
                }
            });
            $.ajax({
                url:'${pageContext.request.contextPath}/front/movie/getHotPlay',
                async:true,
                dataType: "json",
                success:function (data) {
                    NProgress.done();
                    var htmlHotPlay = template('hotPlay',{list:data.data});
                    $('#hotPlayWrap').html(htmlHotPlay);
                }
            });
            $.ajax({
                url:'${pageContext.request.contextPath}/front/movie/getHotPlayList',
                async:true,
                dataType: "json",
                success:function (data) {
                    NProgress.done();
                    $('#hotPlay1Cover').attr("src",data.data[0].cover);
                    $('#hotPlay1Booking').text(data.data[0].booking);
                    $('#hotPlay1Name').html('<a href="${pageContext.request.contextPath}/front/movie/movieDetail?id='+data.data[0].id+'" style="color: #777777">'+data.data[0].name+'</a>');
                    var htmlHotPlay = template('hotPlayList',{list:data.data});
                    $('#hotPlayLists').html(htmlHotPlay);
                }
            });
            $.ajax({
                url:'${pageContext.request.contextPath}/front/movie/getPlanPlay',
                async:true,
                dataType: "json",
                success:function (data) {
                    NProgress.done();
                    //console.log(data)
                    var htmlPlanPlay = template('planPlay',{list:data.data});
                    $('#planPlayWrapper').html(htmlPlanPlay);
                }
            });
            $.ajax({
                url:'${pageContext.request.contextPath}/front/movie/getPlanPlayList',
                async:true,
                dataType: "json",
                success:function (data) {
                    NProgress.done();
                    //console.log(data)
                    $('#planPlayPoster1').attr("src",data.data[0].cover);
                    $('#planPlayPoster2').attr("src",data.data[1].cover);
                    $('#planPlayPoster3').attr("src",data.data[2].cover);
                    $('#planPlayName1').html('<a href="${pageContext.request.contextPath}/front/movie/movieDetail?id='+data.data[0].id+'" style="color: #777777">'+data.data[0].name+'</a>');
                    $('#planPlayName2').html('<a href="${pageContext.request.contextPath}/front/movie/movieDetail?id='+data.data[1].id+'" style="color: #777777">'+data.data[1].name+'</a>');
                    $('#planPlayName3').html('<a href="${pageContext.request.contextPath}/front/movie/movieDetail?id='+data.data[2].id+'" style="color: #777777">'+data.data[2].name+'</a>');
                    $('#planPlayWish1').text(data.data[0].want_count+'人想看');
                    $('#planPlayWish2').text(data.data[1].want_count+'人想看');
                    $('#planPlayWish3').text(data.data[3].want_count+'人想看');
                    $('#planPlayTime').text(data.data[0].time+"上映");
                    var htmlHotPlay = template('planPlayList',{list:data.data});
                    $('#fileRankPlan').html(htmlHotPlay);
                }
            });
            $.ajax({
                url:'${pageContext.request.contextPath}/front/movie/getGoodPlay',
                async:true,
                dataType: "json",
                success:function (data) {
                    NProgress.done();
                    console.log(data)
                    var htmlGoodPlay = template('goodPlay',{list:data.data});
                    $('#goodPlays').html(htmlGoodPlay);
                }
            });
            $.ajax({
                url:'${pageContext.request.contextPath}/front/movie/getGoodPlayList',
                async:true,
                dataType: "json",
                success:function (data) {
                    NProgress.done();
                    $('#goodPlayCover1').attr("src",data.data[0].cover);
                    $('#goodPlayScore1').text(data.data[0].score);
                    $('#goodPlayName1').html('<a href="${pageContext.request.contextPath}/front/movie/movieDetail?id='+data.data[0].id+'" style="color: #777777">'+data.data[0].name+'</a>');
                    var htmlGoodPlay = template('GoodPlayList',{list:data.data});
                    $('#goodMovieList').html(htmlGoodPlay);
                }
            });
            $('#all1').click(function () {
                window.location.href='${pageContext.request.contextPath}/front/index/movie?tab=0';
            });
            $('#all2').click(function () {
                window.location.href='${pageContext.request.contextPath}/front/index/movie?tab=1';
            });
            $('#all3').click(function () {
                window.location.href='${pageContext.request.contextPath}/front/index/movie?tab=2';
            });
        });
    </script>
    <title>i movie</title>
</head>
<body>

<!--导航栏-->
<%@ include file="header.jsp"%>
<div class="container">
    <div class="swiper-container" id="swiper" style="width: 100%;">
        <div class="swiper-wrapper" id="swiper-wrapper">

        </div>
        <!-- Add Pagination -->
        <div class="swiper-pagination"></div>
    </div>
</div>


<!--正在热映-->
<div class="hot-play container">
    <div class="row">
        <div class="col-md-7 left">
            <div class="panel panel-default">
                <div class="panel-body title">
                    <div class="text-left hot-play-title">正在热映</div>
                    <div class="text-right all" id="all1">
                        全部<i class="glyphicon glyphicon-chevron-right"></i>
                    </div>
                </div>
            </div>
            <div class="hot-play-items" id="hotPlayWrap">

            </div>
        </div>
        <div class="col-md-5 right hidden-sm hidden-xs">
            <div class="panel panel-default">
                <div class="panel-body title">
                    <div class="text-left">今日票房</div>
                </div>
            </div>
            <div class="media media-box">
                <div class="media-left">
                    <a href="#" class="poster-a">
                        <span class="ranking-top-icon"></span>
                        <img class="media-object poster" src="" id="hotPlay1Cover">
                    </a>
                </div>
                <div class="media-body">
                    <h4 class="media-heading media-name" id="hotPlay1Name"></h4>
                    <span class="media-money" id="hotPlay1Booking"></span>
                </div>
            </div>
            <div class="film-ranking-items" id="hotPlayLists">
            </div>

        </div>
    </div>
</div>
<div class="hot-play container">
    <div class="row">
        <div class="col-md-7 left">
            <div class="panel panel-default">
                <div class="panel-body title panel-body2">
                    <div class="text-left hot-play-title ">即将上映</div>
                    <div class="text-right all" id="all2">
                        全部<i class="glyphicon glyphicon-chevron-right"></i>
                    </div>
                </div>
            </div>
            <div class="hot-play-items" id="planPlayWrapper">

            </div>
        </div>
        <div class="col-md-5 right hidden-sm hidden-xs">
            <div class="panel-body title panel-body3">
                <div class="text-left hot-play-title ">最受期待</div>
            </div>
            <div class="media media-box media-box2">
                <div class="media-left">
                    <a href="#" class="poster-a poster-a-2">
                        <span class="ranking-top-icon"></span>
                        <img class="media-object poster" src="" id="planPlayPoster1">
                    </a>
                </div>
                <div class="media-body media-body-wish">
                    <h4 class="media-heading media-name" id="planPlayName1"></h4>
                    <span class="media-time" id="planPlayTime"></span>
                    <span class="media-wish-num" id="planPlayWish1"></span>
                </div>
            </div>
            <div class="film-ranking-items">
                <div class="wish-item-2">
                    <div class="wish-item">
                        <div class="img-box">
                            <img src="" id="planPlayPoster2" style="height: 100px;background-size: contain">
                        </div>
                        <div class="wish-item-info">
                            <span class="wish-info-name" id="planPlayName2"></span>
                            <span class="wish-info-num" id="planPlayWish2"></span>
                        </div>
                    </div>
                    <div class="wish-item text-right">
                        <div class="img-box">
                            <img src="" id="planPlayPoster3" style="height: 100px;background-size: contain">
                        </div>
                        <div class="wish-item-info text-left padding-right">
                            <span class="wish-info-name" id="planPlayName3"></span>
                            <span class="wish-info-num" id="planPlayWish3"></span>
                        </div>
                    </div>
                </div>
                <div id="fileRankPlan"></div>
            </div>
        </div>
    </div>
</div>
<div class="hot-play container">
    <div class="row">
        <div class="col-md-7 left">
            <div class="panel panel-default">
                <div class="panel-body title">
                    <div class="text-left hot-play-title">正在热映</div>
                    <div class="text-right all" id="all3">
                        全部<i class="glyphicon glyphicon-chevron-right"></i>
                    </div>
                </div>
            </div>
            <div class="hot-play-items" id="goodPlays">

            </div>
        </div>
        <div class="col-md-5 right hidden-sm hidden-xs">
            <div class="panel-body title panel-body3">
                <div class="text-left hot-play-title ">经典电影</div>
            </div>
            <div class="media media-box">
                <div class="media-left">
                    <a href="#" class="poster-a top100">
                        <span class="ranking-top-icon"></span>
                        <img class="media-object poster" src="" id="goodPlayCover1">
                    </a>
                </div>
                <div class="media-body">
                    <h4 class="media-heading media-name" id="goodPlayName1"></h4>
                    <span class="media-money text-orange" id="goodPlayScore1"></span>
                </div>
            </div>
            <div class="film-ranking-items" id="goodMovieList">

            </div>
            </div>

        </div>
    </div>
</div>
<%@ include file="footer.jsp"%>
<script id="bannerTemp" type="text/html">
    {{each list item index}}
    <div class="swiper-slide" style="height: ;width: 100%"><a href="${pageContext.request.contextPath}/front/movie/movieDetail?id={{item.movie_id}}"><img src="{{item.url}}" style="width: 100%;height: auto"></a></div>
    {{/each}}
</script>
<script id="hotPlay" type="text/html">
    {{each list item index}}
    <div class="hot-play-item">
        <div class="item-top">
        <img src="{{item.cover}}">
        <div class="item-info">
            {{if item.effect=='3D'}}
            <span class="m3d"></span>
            {{/if}}
            {{if item.effect=='2DIMAX'}}
            <span class="imax2d"></span>
            {{/if}}
            {{if item.effect=='3DIMAX'}}
            <span class="imax3d"></span>
            {{/if}}
        <span class="item-info-name"><a href="${pageContext.request.contextPath}/front/movie/movieDetail?id={{item.id}}">{{item.name}}</a></span>
        <span class="item-info-grade">
            {{if item.score==0}}
                暂无
            {{else}}
                {{item.score}}
            {{/if}}
        </span>
    </div>
    </div>
    <div class="item-footer">
        <%--<a href="${pageContext.request.contextPath}/front/index/cinema">购票</a>--%>
        </div>
        </div>
    {{/each}}
</script>
<script type="text/html" id="hotPlayList">
    {{each list item index}}
        {{if index==0}}
            {{else}}
    <div class="film-ranking-item">
        <span class="item-span">
        <span class="text-left item-left"><span class="item-ranking top">{{index+1}}</span><a href="${pageContext.request.contextPath}/front/movie/movieDetail?id={{item.id}}" style="color: #777777">{{item.name}}</a></span>
    <span class="text-right item-right">{{item.booking}}</span>
    </span>
    </div>
        {{/if}}
    {{/each}}
</script>
<script id="planPlay" type="text/html">
    {{each list item index}}
    <div class="hot-play-item">
        <div class="item-top">
            <img src="{{item.cover}}">
            <div class="item-info">
                {{if item.effect=='3D'}}
                    <span class="m3d"></span>
                {{/if}}
                {{if item.effect=='2DIMAX'}}
                <span class="imax2d"></span>
                {{/if}}
                {{if item.effect=='3DIMAX'}}
                <span class="imax3d"></span>
                {{/if}}
                <span class="item-info-name"><a href="${pageContext.request.contextPath}/front/movie/movieDetail?id={{item.id}}">{{item.name}}</a></span>
                <span class="item-info-grade">{{item.score}}</span>
            </div>
        </div>
        <div class="item-footer2">
            <span class="item-wish">{{item.want_count}}人想看</span>
        </div>
        <span class="item-footer2-rt">{{item.time}}上映</span>
    </div>
    {{/each}}
</script>
<script id="planPlayList" type="text/html">
    {{each list item index}}
        {{if index==0}}
    {{else if index==1}}
    {{else if index==2}}
    {{else}}
    <div class="film-ranking-item">
            <span class="item-span">
              <span class="text-left item-left"><span class="item-ranking">{{index+1}}</span><a href="${pageContext.request.contextPath}/front/movie/movieDetail?id={{item.id}}" style="color: #777777">{{item.name}}</a></span>
              <span class="text-right item-right text-orange">{{item.want_count}}人想看</span>
            </span>
    </div>
    {{/if}}
    {{/each}}
</script>
<script id="goodPlay" type="text/html">
    {{each list item index}}
    <div class="hot-play-item">
        <div class="item-top">
            <img src="{{item.cover}}">
            <div class="item-info">
                {{if item.effect=='3D'}}
                <span class="m3d"></span>
                {{/if}}
                {{if item.effect=='2DIMAX'}}
                <span class="imax2d"></span>
                {{/if}}
                {{if item.effect=='3DIMAX'}}
                <span class="imax3d"></span>
                {{/if}}
                <span class="item-info-name"><a href="${pageContext.request.contextPath}/front/movie/movieDetail?id={{item.id}}">{{item.name}}</a></span>
                <span class="item-info-grade">{{item.score}}</span>
            </div>
        </div>
    </div>
    {{/each}}
</script>
<script type="text/html" id="GoodPlayList">
    {{each list item index}}
    {{if index==0}}
    {{else}}
    <div class="film-ranking-item">
        <span class="item-span">
        <span class="text-left item-left"><span class="item-ranking top">{{index+1}}</span><a href="${pageContext.request.contextPath}/front/movie/movieDetail?id={{item.id}}" style="color: #777777">{{item.name}}</a></span>
    <span class="text-right item-right">{{item.score}}</span>
    </span>
    </div>
    {{/if}}
    {{/each}}
</script>
</body>
</html>
